<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <section id="slide-main">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="col-md-12" style="min-height: 120px;">
                                <img src="site/images/nuncafoifacil.png"/>
                            </div>
                            <h5>CONHEÇA OS MAIORES PRÊMIOS DAS LOTERIAS</h5>
                            <div class="col-md-8  box">
                                <div class="icon-loterys euromillions col-md-4"></div>
                                <div class="icon-loterys megamillions col-md-4"></div>
                                <div class="icon-loterys powerball col-md-4"></div>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <img src="site/images/img_banner.png"/>
                        </div>
                    </div>
                </div>
            </section>
            <section id="nextplay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Próximos Jogos</h1>

                            <ui:repeat value="#{managerListaJogos.jogos}" var="j">
                                <div class="box col-md-2">
                                    <div class="boxheader col-md-12">
                                        <div class="icon-loterys-min #{j.loteria.cod}-min col-md-12"></div>
                                    </div>
                                    <div class="jackpot col-md-12">
                                        <span class="simbolo" style="float:left; position: absolute">
                                            #{j.jackpotCurrency}
                                        </span>
                                        <h:outputText class="number" value="#{j.jackpotNumber}"/>
                                        <span class="text" >
                                            #{j.jackpotText}
                                        </span>
                                    </div>
                                    <div class="boxfooter jackpot col-md-12">
                                        <span>
                                            <h:outputText value="#{j.dataExpiracao}">
                                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
                                            </h:outputText>
                                        </span>
                                        <h:form>
                                            <p:button styleClass="button-brown" value="Jogar Agora" outcome="jogar.xhtml">
                                                <f:param value="#{j.id}" name="jogo"/>
                                            </p:button>
                                        </h:form>
                                    </div>
                                </div>
                            </ui:repeat>

                        </div>
                    </div>
                </div>

            </section>
            <section id="lastresults">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-xs-12">
                            <h1>Últimos Resultados</h1>

                            <div class="col-md-6 col-xs-12">
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-6 col-xs-12">
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>
                                <div class="box col-md-12 col-xs-12">
                                    <div class="col-md-3  col-xs-3 icon-loterys megamillions "></div>
                                    <div class="info col-md-3  col-xs-3">
                                        <span class="col-md-12">Sábado 12/05/15</span>
                                    </div>
                                    <div class="col-md-5 col-xs-5 numbers">
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                                        <span class="bolaextra">6</span>
                                    </div>
                                </div>


                            </div>



                        </div>
                    </div>
                </div>

            </section>
            <section id="howtoplay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Como jogar?</h1>
                            <div class="col-md-12 title">
                                <h2>Nunca mais perca seu tempo em filas para fazer seus jogos</h2>	
                                <h3>Veja como é faço rápido e seguro fazer seus jogos no Aratuk</h3>
                            </div>
                            <div class="col-md-4 center">
                                <h5>Faça seu jogo em menos de 1 minuto</h5>
                                <img src="site/images/comojogar01.png"/>
                                <p>Escolha a loteria, seu jogo de preferência e seus números, escolhendo-os
                                    aleotoriamente ou entre seus números da sorte</p>
                            </div>
                            <div class="col-md-4 center">
                                <h5>Garantia de segurança para sua aposta</h5>
                                <img src="site/images/comojogar02.png"/>
                                <p>Escolha a loteria, seu jogo de preferência e seus números, escolhendo-os
                                    aleotoriamente ou entre seus números da sorte</p>
                            </div>
                            <div class="col-md-4 center">
                                <h5>Gerêncie seus prêmios e seus créditos</h5>
                                <img src="site/images/comojogar03.png"/>
                                <p>Escolha a loteria, seu jogo de preferência e seus números, escolhendo-os
                                    aleotoriamente ou entre seus números da sorte</p>
                            </div>

                        </div>
                        <div class="col-md-12 center">
                            <button class="button-brown col-md-2 col-md-offset-5">Jogar Agora</button>
                        </div>
                    </div>
                </div>

            </section>
            <section id="loterys">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Loterias que já estão no Aratuk</h3>
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="site/images/MEGA.png"/>
                                        <hr/>
                                        <p>
                                            O mega millions é uma máquina de rollover. O que os fãs esperam, o jogo dá. O maior jackpot deste jogo foi<br/> 
                                            de U$ 656 milhões e foi o maior prêmio alguma fez pago na história das loterias americanas. E com 9 níveis<br/> 
                                            de prêmios, o Mega Millions oferece aos jogadores várias chances de ganhar
                                        </p>
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="site/images/euromillionsgrande.png"/>
                                        <hr/>
                                        <p>
                                            A EuroMilhões é uma das principais loterias do mundo, com fãs no mundo todo. A EuroMilhões tem uma reputação internacional<br/>
                                            em jackpots recorde e acúmulos excitantes. A Mega Millions oferece uma opção multiplicadora chamada Megaplier, <br/>
                                            que pode multiplicar os prêmios secundários por 2, 3 ou 4, <br/> para os bilhetes que acertarem o Megaplier sorteada junto com o sorteio principal
                                        </p>
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="site/images/ny-lotto.jpeg"/>
                                        <hr/>
                                        <p>
                                            Aposte no próximo sorteio da Lotto de NY online! Compre um bilhete da Lotto do Estado de Nova Iorque <br/>
                                            selecionando seis dos 59 números e você poderá ganhar um dos cinco prêmios nos sorteios bissemanais da<br/>
                                            loteria do estado dos EUA!

                                        </p>
                                    </div>
                                </div>

                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                            <div class="col-md-12 mais">
                                <hr/>
                                <a  href="loterias.xhtml">
                                    <img src="site/images/mais.png"/>
                                </a>
                                <p>Saiba Mais</p>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
            <section id="lastwinner">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1"/>
                        <div class="col-md-10">
                            <h2>Últimos Jogadores</h2>
                            <h4>Eles acreditaram na sorte e faturaram grandes prêmios</h4>
                            <div class="col-md-1"/>
                            <div class="winner col-md-3">
                                <div class="avatar">
                                    <img src="site/images/avatar.png"/>
                                    <h3>Fulano de Tal</h3>
                                    <h5>Eletricista</h5>
                                </div>
                                <div class="depoimento">
                                    <h5>Depoimento</h5>
                                    <p>
                                        O mega millions é uma máquina de rollover. O que os fãs esperam, o jogo dá. 
                                        O maior jackpot deste jogo foi<br/> 
                                    </p>
                                </div>
                            </div>
                            <div class="winner col-md-3">
                                <div class="avatar">
                                    <img src="site/images/avatar.png"/>
                                    <h3>Fulano de Tal</h3>
                                    <h5>Eletricista</h5>
                                </div>
                                <div class="depoimento">
                                    <h5>Depoimento</h5>
                                    <p>
                                        O mega millions é uma máquina de rollover. O que os fãs esperam, o jogo dá. 
                                        O maior jackpot deste jogo foi<br/> 
                                    </p>
                                </div>
                            </div>
                            <div class="winner col-md-3">
                                <div class="avatar">
                                    <img src="site/images/avatar.png"/>
                                    <h3>Fulano de Tal</h3>
                                    <h5>Eletricista</h5>
                                </div>
                                <div class="depoimento">
                                    <h5>Depoimento</h5>
                                    <p>
                                        O mega millions é uma máquina de rollover. O que os fãs esperam, o jogo dá. 
                                        O maior jackpot deste jogo foi<br/> 
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-12 text">
                                <h1>Tá esperando o quê para ser o próximo ganhador?</h1>
                            </div>
                            <div class="col-md-12 center">
                                <button class="button-brown col-md-2 col-md-offset-5">Jogar Agora</button>
                            </div>
                        </div>
                    </div>

                </div>

            </section>
            <script>
                $(document).ready(function(){
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 100) {
                            logoSmall();
                        } else {
                            logoOriginal();
                        }
                    });
                });
            </script>
        </ui:define>
    </ui:composition>
</html>
